<template>
  <div class="os-home"
       ref="osHome">
    <div class="os-home--items"
         v-for="el in items"
         :key="el.name"
         :id="`section-${el.name}`">
      <div class="os-home__title">
        <i class="iconfont"
           :class="el.icon"></i>
        {{el.label}}
      </div>
      <div class="os-home__card">
        <template v-if="el.name === 'elements'">
          <os-card v-for="(k, i) in el.list"
                   :key="`card${i}`"
                   :data-image="k.img">
            <template #header>
              <h1 class="card-title">{{k.label}}</h1>
            </template>
            <template #content>
              <p class="card-desc">{{k.desc}}</p>
            </template>
          </os-card>
        </template>
        <template v-else>
          <div style="height:300px;"></div>
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, reactive, onUnmounted } from 'vue'
  import osCard from '@/components/os-card/index.vue'
  import menus from './menus'
  import { useStore } from 'vuex'
  export default defineComponent({
    name: 'home',
    components: { osCard },
    setup() {
      // const ENV = import.meta.env;
      // console.log(ENV);
      const osHome = ref<any>(null)
      const items = reactive(menus)
      const store = useStore()

      onMounted(() => {
        store.commit('setCurrentSection', store.getters.mainNavebarList[0].value)
        osHome.value.addEventListener('scroll', () => {
          // console.log(osHome.value.scrollTop)
          // 当前滚动条的高度
          const { scrollTop } = osHome.value || 0
          store.getters.mainNavebarList.forEach((el: any) => {
            // console.log(document.getElementById(`section-${el.value.replace(/\//g, '')}`)?.offsetTop)
            // 每个元素距离滚动上方的距离
            const ele = document.getElementById(`section-${el.value.replace(/\//g, '')}`)
            const offsetTop: number = ele?.offsetTop || 0
            const offsetHeight: number = ele?.offsetHeight || 0
            if (offsetTop - 50 < scrollTop && scrollTop <= offsetTop + offsetHeight) {
              store.commit('setCurrentSection', el.value)
            }
          })
        })
      })

      // onUnmounted(() => {
      //   store.commit('setCurrentSection', store.getters.mainNavebarList[0].value)
      // })
      return { items, osHome }
    },
  })
</script>
<style lang="scss" scoped>
  @include b(home) {
    height: calc(100vh - 50px);
    overflow-y: auto;
    @include m(items) {
      padding-top: 15px;
    }
    @include e(title) {
      font-size: 18px;
      i {
        font-size: 20px;
        @include jbfont();
      }
    }
    @include e(card) {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      .card-title {
        font-size: 36px;
        font-weight: 700;
        text-shadow: rgba(#000000, 0.5) 0 10px 10px;
      }
      .card-desc {
        opacity: 0;
        text-shadow: rgba(#000000, 1) 0 2px 3px;
        transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      :deep(.os-card--items):hover {
        .card-desc {
          transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          opacity: 1;
        }
      }
    }
  }
</style> 